import React, { Component } from 'react';
import TRNotification from '#/utils/notification';
import styles from './index.less';
import { Spin } from 'antd';
import PropTypes from 'prop-types';
import cls from 'classnames';
import { LoadingOutlined, Loading3QuartersOutlined } from '#/utils/antdIcons';

class PLoadingComponent extends Component {
  render() {
    const { title, containerStyle = {}, messageStyle = {}, antLoading = false } = this.props;
    if (antLoading) {
      return (
        <div
          className={cls({
            [styles.loading_box]: true,
            [styles.ant_box]: true,
          })}
        >
          <Spin />
        </div>
      );
    }
    return (
      <div className={styles.loading_box}>
        <div className={styles.container} style={containerStyle}>
          <FacebookProgress />
          <div className={styles.message} style={messageStyle}>
            {title}
          </div>
        </div>
      </div>
    );
  }
}

export function FacebookProgress() {
  return (
    <div className={styles.tr_spin}>
      <Loading3QuartersOutlined className={styles.tr_spin_bg} />
      <Loading3QuartersOutlined className={`${styles.tr_spin_bg} ${styles.tr_spin_bg_roate}`} />
      <Spin indicator={<LoadingOutlined style={{ fontSize: 40 }} spin />} />
    </div>
  );
}

PLoadingComponent.propTypes = {
  title: PropTypes.node,
};
class PLoadingModal {
  __key__ = '';
  show = (title, containerStyle, messageStyle, antLoading = false) => {
    if (this.__key__ !== '') {
      return;
    }
    this.__key__ = String(Date.now());
    TRNotification.add({
      key: this.__key__,
      content: (
        <PLoadingComponent
          title={title}
          antLoading={antLoading}
          containerStyle={containerStyle}
          messageStyle={messageStyle}
        />
      ),
      duration: null,
    });
  };

  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}

const pLoading = new PLoadingModal();
export default pLoading;
